<template>
  <div style="padding: 10px; background-color: #fff">
    <el-table
      height="100px"
      v-adaptive="{ bottomOffset: 20 }"
      :data="tableData"
      border
    >
      <el-table-column align="center" prop="name1" label="零件号">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="form.name1"
            placeholder="请输入零件号"
            size="small"
            clearable
          ></el-input>
        </template>
        <el-table-column align="center" prop="name1" label="炉号" width="80">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name1"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name2" label="熔批次" width="80">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name2"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name3"
          label="坩埚次数"
          width="80"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name3"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop=""
          label="模壳预热温度"
          width="100"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name4"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column align="center" prop="name3" label="零件名称">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="form.name2"
            placeholder="请输入零件名称"
            size="small"
            clearable
          ></el-input>
        </template>
        <el-table-column align="center" label="炉料加热">
          <el-table-column
            align="center"
            prop="name5"
            label="时间T / 功率KW"
            width="120"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name5"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name6"
            label="真空度"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name6"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column align="center" label="材料牌号">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="form.name3"
            placeholder="请输入材料牌号"
            size="small"
            clearable
          ></el-input>
        </template>
        <el-table-column align="center" label="融化精度">
          <el-table-column
            align="center"
            prop="name7"
            label="到温时间"
            width="120"
          >
            <template slot-scope="scope">
              <el-date-picker
                size="small"
                class="w100"
                v-model="scope.row.name7"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name8"
            label="精炼温度"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name8"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name9"
            label="精炼时间"
            width="80"
          >
            <template slot-scope="scope">
              <el-date-picker
                size="small"
                class="w100"
                v-model="scope.row.name9"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name11"
            label="真空度"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name10"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column align="center" label="上下批次号">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="form.name4"
            placeholder="请输入上下批次号"
            size="small"
            clearable
          ></el-input>
        </template>
        <el-table-column align="center" label="型壳转运">
          <el-table-column
            align="center"
            prop="name12"
            label="出预入真"
            width="120"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name11"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name13"
            label="入真到浇"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name12"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="程序编号">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="form.name5"
            placeholder="程序编号"
            size="small"
            clearable
          ></el-input>
        </template>
        <el-table-column align="center" label="浇注">
          <el-table-column
            align="center"
            prop="name13"
            label="浇注温度"
            width="120"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name13"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name14"
            label="浇注时间"
            width="80"
          >
            <template slot-scope="scope">
              <el-date-picker
                size="small"
                class="w100"
                v-model="scope.row.name14"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="name15"
            label="浇注速度"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name15"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name16"
            label="真空度"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name16"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name17"
            label="浇注功率"
            width="80"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name17"
                placeholder="请输入"
                size="small"
                clearable
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="日期">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-date-picker
            size="small"
            class="w100"
            v-model="form.name6"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </template>
        <el-table-column align="center" label="破真空时间" width="100">
          <template slot-scope="scope">
            <el-date-picker
              size="small"
              class="w100"
              v-model="scope.row.name18"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name19"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      form: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
      },
    };
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.tableData.push({
        name1: `#${i + 1}`,
        name2: i + 2,
        name3: `4${i}`,
        name4: "80℃",
        name5: "20/10",
        name6: `0.${Math.ceil(Math.random() * 6)}`, //0.2 0.6,
        name7: `2022-6-${i + 10} ${i + 10}:${i + 20}:00`,
        name8: "120℃",
        name9: `2022-6-${i + 10} ${i + 10}:${i + 20}:00`, //0.2 0.6
        name10: `0.${Math.ceil(Math.random() * 6)}`,
        name11: `0.${Math.ceil(Math.random() * 6)}`,
        name12: `0.${Math.ceil(Math.random() * 6)}`,
        name13: "120℃",
        name14: `0.${Math.ceil(Math.random() * 6)}`,
        name15: `2022-6-${i + 10} ${i + 10}:${i + 20}:00`,
        name16: "2",
        name17: `0.${Math.ceil(Math.random() * 6)}`,
        name18: `2022-6-${i + 10} ${i + 10}:${i + 20}:00`,
        name19: "备注",
      });
    }
  },
  methods: {
    handleChange(row, keys) {
      keys.forEach((element) => {
        row[element] = false;
      });
    },
  },
};
</script>

<style>
</style>